<template>
	<view class="order-container c-container table-container">
		<navigator class="fixed-right" v-if='order_id' :url="'/pages/order/detail/detail?order_id='+order_id">
			<text>查看定单详情</text>
		</navigator>
		<view class="c-row-box">
			<view class="c-row-head">
				<view class="c-row-title">承办公司</view>
			</view>
			<view class="c-row-item">
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title"><text style="color: red;">*</text>承办公司</view>
						<view class="col-text">
							<picker mode="selector" :range="companyList" range-key="title" @change="companyChange" :disabled="isPreview">
								<view>{{customer.company_title == '' ? '请选择' : customer.company_title}}
								</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 减酒店 -->
		<divider title="减酒店"></divider>
		<view class="c-row-box">
			<view class="c-row-head">
				<view class="c-row-title">酒店协议</view>
			</view>
			<view class="c-row-item">
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title"><text style="color: red;">*</text>协议桌数</view>
						<view class="col-text">
							<input type="digit" v-model="hotel.table_amount" @input="hotelChange" :disabled="isPreview" placeholder="请输入" />
						</view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title"><text style="color: red;">*</text>协议餐标</view>
						<view class="col-text">
							<input type="digit" v-model="hotel.table_price" @input="hotelChange" :disabled="isPreview" placeholder="请输入" />
						</view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title">优惠金额</view>
						<view class="col-text">
							<input type="digit" v-model="hotel.banquet_discount" @input="hotelChange" :disabled="isPreview"
								placeholder="请输入" />
						</view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title"><text style="color: red;">*</text>减桌总价</view>
						<view class="col-text">
							<text>{{hotel.totals}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 减客人 -->
		<divider title="减客人"></divider>
		<view class="c-row-box">
			<view class="c-row-head">
				<view class="c-row-title">减桌</view>
			</view>
			<view class="c-row-item">
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title"><text style="color: red;">*</text>减桌桌数</view>
						<view class="col-text">
							<input type="digit" v-model="customer.table_amount" @input="customerChange" :disabled="isPreview"
								placeholder="请输入" />
						</view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title"><text style="color: red;">*</text>减桌餐标</view>
						<view class="col-text">
							<input type="digit" v-model="customer.table_price" @input="customerChange" :disabled="isPreview"
								placeholder="请输入" />
						</view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title">优惠金额</view>
						<view class="col-text">
							<input type="digit" v-model="customer.banquet_discount" @input="customerChange" :disabled="isPreview"
								placeholder="请输入" />
						</view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title">签约时间</view>
						<view class="col-text">
							<picker mode="date" :start="startDate" :end="endDate" @change="signDateChange" :disabled="isPreview">
								<view>{{customer.sign_date}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title"><text style="color: red;">*</text>减桌总价</view>
						<view class="col-text">
							<text>{{customer.banquet_totals}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 合同信息 -->
		<divider title="合同信息"></divider>
		<contract-info :orderParams="tableInfo" :isPreview="isPreview"></contract-info>

		<!-- 底部栏-创建 -->
		<view class="footer-box" v-if="confirm_id == 0">
			<view class="footer-action-btn">
				<button size="mini" @click="saveFn">提交</button>
			</view>
		</view>


		<divider title="审核流程" v-if="sequenceData.length > 0 || confirmList.length > 0 || confirmSteps.length > 0">
		</divider>
		<!-- 新版审批流程————创建  -->
		<template v-if="sequenceData.length > 0">
			<steps-create :stepList="sequenceData"></steps-create>
		</template>

		<!-- 老版审核流程 -->
		<template v-if="confirmList.length > 0">
			<auditProcess :value="confirmList" :btnValue="buttons" :isShowBtn="options.api?false:true"
				:transferForm="transferForm" @clearTransferForm="clearTransferForm" @resubmit='resubmits'>
			</auditProcess>
		</template>
		<!-- 新版审核流程————查看 -->
		<template v-if="confirmSteps.length > 0">
			<steps-look :stepList="confirmSteps"></steps-look>
			<footer-action-btn :btnValue="buttons" :transferForm="transferForm" @clearTransferForm="clearTransferForm" :isShowAddonsBtn="false"
				:isShowBtn="options.api?false:true" @resubmit='resubmits' @transferSubmit="transferSubmit">
			</footer-action-btn>
		</template>


	</view>
</template>

<script>
	import contractInfo from '@/pages/order/createOrder/components/addMinusContract.vue'
	import divider from '@/component/divider/divider.vue'

	import stepsLook from '@/component/steps-look/steps-look.vue' // 新版审核流程
	import footerActionBtn from '@/component/footer-action-btn/footer-action-btn.vue' // 底部操作按钮组
	import stepsCreate from '@/component/steps-create/steps-create.vue'
	import auditProcess from '@/component/auditProcess.vue';

	import request from '@/utils/request.js';
	export default {
		components: {
			contractInfo,
			divider,

			stepsCreate,
			stepsLook,
			footerActionBtn,
			auditProcess
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				confirm_id: 0,
				order_id: 0,
				
				isPreview: false,

				options: '',
				// 婚车
				companyList: [],
				paymentList: [],

				confirmList: [], // 老版审核列表
				buttons: [],
				confirm: {}, //审批信息

				tableInfo: {
					remark: '',
					contract_img: [],
					receipt_img: [],
					note_img: []
				},

				hotel: {
					table_amount: 0,
					table_price: 0,
					banquet_discount: 0,
					totals: 0,
					pay_hotel_totals: 0
				},

				customer: {
					company_title: '',
					company_id: 0,
					table_amount: 0,
					table_price: 0,
					banquet_discount: 0,
					sign_date: currentDate,
					banquet_totals: 0
				},

				transferForm: {
					realname: '',
					user_id: ''
				},
				sequenceData: [], // 新版审核
				confirmSteps: [], // 新版审核
			}
		},
		onLoad(options) {
			this.companyList = uni.getStorageSync('allPicker').companyList;
			this.paymentList = uni.getStorageSync('allPicker').paymentList;
			// 添加 从订单详情页添加子项目 包含order_id
			if (options.params) {
				this.options = JSON.parse(options.params);
				this.order_id = this.options.order_id;
			}

			// 审核查看 lookApproval是个对象，包含的id是审核的编号，order_id要从审核详情中获取
			if (options.lookApproval) {
				this.options = JSON.parse(options.lookApproval)
				//查看信息
				this.getDetail(this.options)
				this.confirm_id = this.options.id;
				this.isPreview = true;
				// 审核流程--查看
				this.getConfirmList()
			}

			// 查看 从查看订单审核中进入只有id，这个id是审核的编号，order_id要从审核详情中获取
			if (options.id) {
				this.options = options;
				//查看信息
				this.getDetail(this.options)
				this.confirm_id = this.options.id;
				this.isPreview = true;
				// 审核流程--查看
				this.getConfirmList()
			}

		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			// 时间选择
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 2;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

			// 签约日期
			signDateChange(e) {
				this.customer.sign_date = e.target.value;
			},

			//获取查看信息
			getDetail(e) {
				let that = this
				request.request({
					url: '/h5/order.confirm/detail',
					showLoading: true,
					token: true,
					data: {
						id: e.id,
						type: e.user ? 'confirm_user' : '',
					},
					success(res) {
						if (res.code == 200) {
							let data = res.data.detail;
							that.hotel = data.hotelProtocol;
							that.customer = data.minusTable;
							that.tableInfo = data.minusTable;
							that.order_id = data.minusTable.order_id;
							that.confirmList = res.data.confirmList;
							that.confirm = res.data.confirm; //代表的是当前审核的信息
							that.order_id = that.confirm.order_id;
							that.buttons = res.data.buttons;
							//判断是否可以编辑
							that.buttons.map((item, index) => {
								if (item.id == 'update') {
									that.isPreview = false;
								}
							})

							that.companyList.map((item, index) => {
								if (item.id == that.customer.company_id) {
									that.customer.company_text = item.title;
								}
							})
						}
					},
					fail(e) {
						uni.showToast({
							icon: "none",
							title: "服务器开小差去啦~",
						})
					}
				})
			},

			// 选择公司
			companyChange(e) {
				let index = e.target.value;
				this.customer.company_title = this.companyList[index].title;
				this.customer.company_id = this.companyList[index].id;

				this.getConfirmSequence()
			},

			// 酒店变化
			hotelChange() {
				let that = this;
				let amount = that.hotel.table_amount ? that.hotel.table_amount : 0;
				let price = that.hotel.table_price ? that.hotel.table_price : 0;
				let discount = that.hotel.banquet_discount ? that.hotel.banquet_discount : 0;
				that.hotel.totals = (parseFloat(amount) * parseFloat(price) - parseFloat(discount)).toFixed(2);
				that.hotel.pay_hotel_totals = (parseFloat(amount) * parseFloat(price) - parseFloat(discount)).toFixed(2);
			},

			// 客人变化
			customerChange() {
				let that = this;
				let amount = that.customer.table_amount ? that.customer.table_amount : 0;
				let price = that.customer.table_price ? that.customer.table_price : 0;
				let discount = that.customer.banquet_discount ? that.customer.banquet_discount : 0;
				that.customer.banquet_totals = (parseFloat(amount) * parseFloat(price) - parseFloat(discount)).toFixed(2)
			},

			// 提交转交
			transferSubmit() {
				let that = this;
				request.request({
					url: '/api/order.audit/transfer',
					showLoading: true,
					token: true,
					data: {
						id: that.confirm_id,
						user_id: that.transferForm.user_id
					},
					success(res) {
						if (res.code == 200) {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
							uni.navigateBack({})
						} else {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						}
					}
				})
			},
			// 点击取消时清除转交人员信息
			clearTransferForm() {
				this.transferForm = {
					realname: '',
					user_id: ''
				}
			},

			//查看详情审核流程
			getConfirmList() {
				let that = this
				request.request({
					url: "/api/order.audit/getAuditResult",
					showLoading: true,
					token: true,
					data: {
						id: that.confirm_id
					},
					success(res) {
						that.confirmSteps = res.data.process
					}
				})
			},
			//创建订单时的审核流程
			getConfirmSequence(e) {
				let that = this
				request.request({
					url: "/api/order.audit/getAuditProcess",
					showLoading: true,
					token: true,
					data: Object.assign({
						order_id: that.order_id
					}, {
						audit_type: 'append_table'
					}, {
						company_id: that.customer.company_id
					}),
					success(res) {
						that.sequenceData = res.data.process
					}
				})
			},

			//提交审核
			saveFn() {
				if (!this.verifyFn()) return
				let that = this;
				let params = {};
				params['order_id'] = that.order_id;
				params['is_new'] = 1;
				params['hotelProtocol'] = that.hotel;
				params['minusTable'] = Object.assign(that.customer,{order_id: that.order_id}, that.tableInfo);
				console.log(params);
				request.request({
					url: that.options.api,
					showLoading: true,
					token: true,
					data: params,
					success(res) {
						if (res.code == 200) {
							uni.redirectTo({
								url: "/pages/order/index"
							})
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						}
					}
				})
			},
			// 编辑提交
			editFn(api, id) {
				let that = this;
				if (!this.verifyFn()) return
				let params = {};
				params['order_confirm_id'] = that.confirm_id;
				params['order_id'] = that.order_id;
				params['is_new'] = 1;
				params['hotelProtocol'] = that.hotel;
				params['minusTable'] = Object.assign(that.customer,{order_id: that.order_id}, that.tableInfo);
				request.request({
					url: api,
					showLoading: true,
					token: true,
					data: params,
					success(res) {
						if (res.code == 200) {
							uni.redirectTo({
								url: "/pages/order/index"
							})
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						}
					}
				})
			},
			//底部评论按钮
			resubmits(item) {
				if (item.label == '同意' || item.label == '拒绝' || item.label == '评论') {
					this.commentFn(item)
				} else if (item.label == '转交') {
					uni.navigateTo({
						url: '../../../component/search/search?type=' + 'changeUser'
					})
				} else {
					this.editFn(item.api, item.id)
				}

			},
			// 编辑提交
			commentFn(e) {
				let that = this;
				let url = '';
				if (e.label == '拒绝' && that.confirmList.length == 0) {
					url = '/api/order.audit/reject';
				} else if (e.label == '同意' && that.confirmList.length == 0) {
					url = '/api/order.audit/accept'
				} else {
					url = e.api;
				}
				request.request({
					url: url,
					showLoading: true,
					token: true,
					data: {
						id: that.confirm_id,
						content: e.content ? e.content : '',
						image: e.image ? e.image : '',
					},
					success(res) {
						if (res.code == 200) {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
							that.getDetail(that.options)
							that.getConfirmList()
						} else {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						}
					}
				})
			},
			verifyFn() {
				let tableInfo = this.tableInfo
				let hotelProtocol = this.hotel;
				let append_table = this.customer;
				let bool = true;
				if (append_table.company_id == '') {
					uni.showToast({
						icon: 'none',
						title: '承办公司不能为空'
					})
					bool = false
					return false
				}
				if (hotelProtocol.table_price == '') {
					uni.showToast({
						icon: 'none',
						title: '协议餐标不能为空'
					})
					bool = false
					return false
				}
				if (hotelProtocol.table_amount == '') {
					uni.showToast({
						icon: 'none',
						title: '协议桌数不能为空'
					})
					bool = false
					return false
				}
				if (append_table.table_price == '') {
					uni.showToast({
						icon: 'none',
						title: '减桌餐标不能为空'
					})
					bool = false
					return false
				}
				if (append_table.table_amount == '') {
					uni.showToast({
						icon: 'none',
						title: '减桌桌数不能为空'
					})
					bool = false
					return false
				}
				return bool
			}
		}
	}
</script>

<style lang="less">
	uni-page-body {
		padding-top: 0;
	}

	@import url('../../order/createOrder/components/common.less');
	@import url('../../order/components/common.less');

	.table-container {
		padding-bottom: 120upx;

		.footer-box {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 0 16px;
			display: flex;
			align-items: center;
			height: 100upx;
			font-size: 28upx;
			background-color: #FFFFFF;
			border-top: 1px solid #dedede;
			z-index: 9;

			.footer-title {
				flex: 0 15%;
			}

			.footer-action-btn {
				flex: 1;
				text-align: end;

				button {
					background-color: #007AFF;
					color: #FFFFFF;
				}

				button+button {
					margin-left: 5px;
				}

			}

		}
	}
</style>
